layui.use(['form','layedit', 'jquery', 'layer'], function() {
	var form = layui.form;
	var $ = layui.jquery;
	var layer = layui.layer;
	var layedit=layui.layedit;
	var index=layedit.build('demo'); //建立编辑器
$(function() {
	console.log(123)
	var img = $('#image');
	var bigFile=$('#img-file');
	var select=$('#select');
	//用户存储文章类别
	var taskAry={};
	var bigimgAdd = localStorage.getItem('bigimgAdd');
	//如果存在就显示否则就使用默认
	if(bigimgAdd){
		img.attr('src',bigimgAdd);
	}
	//配置项
	const options = {
		// 纵横比
		aspectRatio:1,
		// 指定预览区域
		preview: '.img-preview'
	}
	// 1.3 创建裁剪区域
	img.cropper(options);
	//当用户点击上传是传递到隐藏文件域中
	$('#btnChooseImage').on('click', function(e) {
		$('#img-file').click();
	});
	//当用户选择文件确认后
	//当用户选择完文件之后读取文件二进制结果
	$('#img-file').on('change', function(e) {
		//1 创建文件读取对象
		var reader=new FileReader();
		//2.读取文件 这个方法是异步方法不能通过return拿到结果
		//判断用户是否取消了
		if(e.target.files[0]!=null){
			reader.readAsDataURL(e.target.files[0]);
			console.log(e.target.files[0])
			//转换为src地址
			var newImgURL = URL.createObjectURL(e.target.files[0]);
			console.log(newImgURL)
			img
				.cropper('destroy') // 销毁旧的裁剪区域
				.attr('src', newImgURL) // 重新设置图片路径
				.cropper(options) // 重新初始化裁剪区域
		}
		//通过监听事件拿到结果  当文件读取完成后
		reader.onload=function(){
		    //把读取的二进制文件编码放到img的src当中就能显示出来
			localStorage.setItem('bigimgAdd',reader.result);
			console.log(reader.result)
		}
	})
	//获取token
	var token = localStorage.getItem('token');
	//获取文章列表数据
	$.ajax({
		method:'get',
		url:'http://api-breakingnews-web.itheima.net/my/article/cates',
		headers: {
			Authorization: token
		},
		success:function(res){
			// 存到对象当中
			// console.log(taskAry)
			//拼接到页面当中
			var con = template('tpl', {
				info:res.data
			});
			//将内容放入列表
			select.html(con);
			//初始化单选框
			 form.render();
		}
	});
	var formData=new FormData();
	//当下拉框被选中时
	form.on('select(selects)', function(data){
		formData.append('cate_id',data.value-0)
	});
	form.on('submit(formDemo)', function(datas) {
		formData.append('title',datas.field.title)
		//获取富文本里的值  index是初始化富文本编辑器返回的值 在最上面
		formData.append('content',layedit.getContent(index))
		//图片存储到本地
		var dataURL = img.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
			width: 100,
			height: 100
		}).toBlob(function(blob){
			formData.append('cover_img',blob);
			formData.append('state','已发布');
			console.log(formData.get('cover_img'))
		}); //将 Canvas 画布上的内容，转化为 blob文件 格式的字符串
		//转化为2进制类型
		$.ajax({
			method:'post',
			url: 'http://api-breakingnews-web.itheima.net/my/article/add',
			data:formData,
			headers: {
			       Authorization: token,
			 },
			 //向服务器提价formData格式的请求必须添加这两个参数
			 contentType:false,
			 processData:false,
			success: function(res) {
				if(res.status==0){
					layer.msg(res.message)
				}else{
					layer.msg(res.message)
				}
			},
			error: function(res) {
				layer.msg(res.message)
			}
		});
		return false;
	});
})
})
